<template>
<div>
  <h1> 编辑用户ID : {{ $route.params.id }} </h1>
  <el-row>
      <el-col :span="6" :offset="2">
        <el-form ref="form" :model="form" label-width="80px">
          <el-form-item label="用户名称">
            <el-input v-model="form.用户名"></el-input>
          </el-form-item>
          <el-form-item label="工作组">
            <el-input v-model="form.工作组"></el-input>
          </el-form-item>

          <el-form-item label="用户状态">
            <el-select v-model="form.用户状态" placeholder="请选择用户状态">
              <el-option v-for="userStatus in userStatusList" :label="userStatus.userStatus"
                         :value="userStatus.id"></el-option>
            </el-select>
          </el-form-item>

          <el-form-item>
            <el-button type="primary" @click="onSubmit">修改用户</el-button>
            <el-button>取消</el-button>
          </el-form-item>
        </el-form>
      </el-col>
    </el-row>
</div>
</template>

<script>
// 引入辅助函数
import {mapState, mapActions, mapGetters} from "vuex";

export default {
  name: "UserEdit",
  data() {
    return {
      form: {
        用户名: '',
        工作组: '',
        status: '',
      },
      editUser: '',
    }
  },

  created() {
      this.getUserDetail()
  },

  methods:{
    // ...mapActions({
    //
    //   getUserById: "getUserById",
    // }),
    //根据id获取用户详情
    getUserDetail(){
      this.axios.get('/api/user/?id='+this.editUserID).then(response =>{
        console.log(response)
        this.form = response.data
      })
    },
    //post 请求用户
    editUserDetail(){
      this.axios.put('/api/user/'+this.editUserID+'/',this.form).then(response =>{
        console.log(response)
      })
    },
    onSubmit(){
      console.log('提交更改信息')
      this.editUserDetail()
      //重新刷新Vuex中的用户列表，这样在userlist组件中就会获取到最新的用户状态
      this.getUserList()
      this.$router.push('/userlist')
    }
  },
  computed: {
    ...mapState({
      userStatusList: state => state.userStatusList,
    }),
    editUserID(){
      return this.$route.params.id
    }
  },
  watch:{
    editUserID(val,oldVal){
      console.log(oldVal,"修改为: "+val, );
      this.getUserDetail()
    }
  }
}
</script>

<style scoped>

</style>
